Styling the Date-Time Picker
The key property for styling the DateTimePicker is the DisplayElements collection. This contains DateTimeDisplayElement objects representing the individual components of the formatted DateTime.
In the default template, these elements are displayed from left to right in order.
In a custom template, you can either reference the DisplayElements collection as a whole, for example as the ItemsSource to an ItemsControl, or you can pick out individual elements for custom presentation. The former technique is appropriate when your style needs to respond flexibly to different date-time formats; the latter technique is appropriate when you have a specific presentation in mind and can control the date-time format in accordance with that specific presentation.
Generic Styles
If you need to be able to handle different formats—for example, you are building a component that may be used in different applications and different cultures—then your template needs to be able to present arbitrary sets of DateTimeDisplayElements. You will typically do this using an ItemsControl, as this supports population from a collection through data binding.
In order to use the DateTimeDisplayElement objects in an ItemsControl, you must supply an ItemTemplate or ItemTemplateSelector, and one or more DataTemplates that specify how to present each display element. Use the DateTimeDisplayElement.ElementType property to determine the appropriate template for an element—typically you will use an IntegerTextBox for Numeric elements, a TextBox or ComboBox for Select elements and a TextBox or TextBlock for ReadOnly elements.
The derived types of DateTimeDisplayElement provide the properties that you should use in your bindings: Value for Numeric elements, Text for Select and ReadOnly elements. Numeric elements also provide Minimum and Maximum values, and Select elements also provide a PermittedValues collection (which will contain, for example, a list of month names).
Specific Styles
More commonly, if you have a specific visual style in mind, you will know which parts of the DateTime structure you want to present and how you want to present them. In this case, you can supply an appropriate format to the DateTimePicker control, and in your template you can access individual elements by index.
An example is the “desk calendar” style from DateTimePickerStyling.xaml in the Elements sample. In this case, the control always shows the day of the month, the name of the month, and the year. There is no need to support other formats. We therefore set the format string to “d MMMM yyyy”, and can bind directly to DisplayElements[0] (the day), DisplayElements[2] (the month) and DisplayElements[4] (the year).
To work out the indexing, each part of the DateTime structure is one element, and each literal string is one element. (In the example above, DisplayElement[1] is the space between the day and the month, and DisplayElement[3] is the space between the month and the year.)
